import SEO from "../components/SEO";

<SEO
  title="IconButton"
  description="Use the IconButton to make buttons that display icons that are clickable"
/>

# IconButton

IconButton composes the `Button` component, except that it renders only an icon.

> Since it's only an icon that's rendered, it's required to pass the
> `aria-label` prop, so screen readers can give meaning to the button.

<carbon-ad />

## Import

```js
import { CIconButton } from "@chakra-ui/vue";
```

## Usage

```vue live=true
<c-icon-button aria-label="Search database" icon="search" />
```

### Button Colors

The `CIconButton` component accepts most of the props from the `CButton` component.
We can use `variantColor` prop to change the color of the button.

```vue live=true
<c-icon-button variant-color="blue" aria-label="Search database" icon="search" />
```

### Button Sizes

Like the Button component, pass the `size` prop to change the size of the
button.

```vue live=true
<c-icon-button
  variant-color="vue"
  aria-label="Call Jonathan"
  size="lg"
  icon="phone"
/>
```

### Button Variants

Like the Button component, pass the `variant` prop to change the size of
the button.

```vue live=true
<c-icon-button
  variant="outline"
  variant-color="vue"
  aria-label="Send email"
  icon="email"
/>
```

### With custom icon

The `CIconButton` component accepts all icons accessible under `this.$chakra.icons`. You can
see <nuxt-link to="/icon#using-an-icon-library">Icon</nuxt-link> to see how to add Fontawesome icons
to Chakra UI.

```vue live=true
// Example of `coffee` icon from fontawesome.

<c-icon-button
  variant-color="orange"
  aria-label="Drink coffee"
  icon="coffee"
/>
```

## Props

| Name                  | Type                                              | Default | Description                                                                                           |
| --------------------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
| size                  | `sm`, `md`, `lg`                                  | `md`    | Specifies an explicit icon size instead of the default value.                                         |
| icon                  | `string`                                          | `null`  | The icon to be used. Refer to the [Icons](/icon/) section of the docs for the available icon options. |
| isRound               | `boolean`                                         | `false` | If `true`, the button will be perfectly round. Else, it'll be slightly round.                         |
| aria-label (required) | `string`                                          |         | A11y: A label that describes the button.                                                              |
| variant               | `outline`, `ghost`, `unstyled` , `link` , `solid` | `solid` | The variant of the button style to use.                                                               |
| variantColor          | `string`                                          | `gray`  | The color scheme of the button.                                                                       |
| isDisabled            | `boolean`                                         |         | If `true`, the button will be disabled.                                                               |
| isLoading             | `boolean`                                         |         | If `true`, the button will show a spinner.                                                            |
